<!-- 选择科室 -->
<template>
    <dy-dialog title="选择科室" ref="dialog" width="50%" @submitHandle="submitHandle">
        <div class="detababox1" v-loading="loading">
            <div class="babox1">
                <div class="baboxspan">
                    <span>已选科室：</span>
                    <el-tooltip class="box-item" effect="dark"
                        :content="!showCheck ? (current_depart ? current_depart.department_name : '') : (commonV.reverarr(current_depart, 'department_name'))"
                        placement="top-start" v-if="current_depart">
                        <span style="color:#1f2d3d;">
                            {{ !showCheck ? (current_depart ? current_depart.department_name : '') :
                                (commonV.reverarr(current_depart, 'department_name'))}}
                        </span>
                    </el-tooltip>
                </div>
            </div>
            <div class="babox2">
                <!-- 科室信息 -->
                <div class="babox3">
                    <div>
                        <el-input size="default" clearable placeholder="科室" :prefix-icon="Search"
                            v-model="searchinput" />
                    </div>
                    <div class="boxfafk1">
                        <el-tree :check-strictly="checkStrictly" ref="tree" :data="departmentArr" node-key="id"
                            default-expand-all :props="defaultProps" :show-checkbox='showCheck'
                            :filter-node-method="filterNode" :expand-on-click-node="false" @node-click="handleNodeClick"
                            @check="checkChange">
                            <template #default="{ node, data }">
                                <span>{{ data.department_name }}</span>
                            </template>
                        </el-tree>
                    </div>
                </div>
            </div>
        </div>
    </dy-dialog>
</template>

<script setup>
import { ref, reactive, toRefs, nextTick } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import commonV from '@/common/index'
import api from '@/api'

let emits = defineEmits(['inputdeparmentdata'])

//数据
let state = reactive({
    loading: false,
    showCheck: false,
    current_depart: null,
    searchinput: '',
    checkStrictly: false,
    departmentArr: [],
    defaultProps: {
        children: "children",
        label: "department_name"
    }
})
let {
    loading, showCheck,
    current_depart, searchinput,
    checkStrictly, departmentArr,
    defaultProps
} = toRefs(state)


//实例
let dialog = ref(null)
let tree = ref(null)

//页面打开执行
let openFunction = (row = null, prop, checked = false) => {
    state.showCheck = checked //是否多选
    if (row) {
        if (!state.showCheck) {
            //单选
            state.current_depart = row[0]
        } else {
            //多选
            state.current_depart = JSON.parse(JSON.stringify(row))
        }
    }
    getdepartdata()
}

//过滤结构树
let filterNode = (value, data) => {
    if (!value) return true
    return data.department_name.indexOf(value) !== -1
}

//获取科室列表
let getdepartdata = async () => {
    state.loading = true
    let params = {}
    params.department_name = state.searchinput
    state.checkStrictly = true
    let res = []
    res = await api.getaxiosdata("department", params)
    state.loading = false
    if (res) {
        state.departmentArr = commonV.transDatatotree(res, "id", "parent_id", "children") //将普通数组转换为tree数组
        state.checkStrictly = false
        if (state.current_depart) {
            nextTick(() => {
                if (!state.showCheck) {
                    //单选
                    tree.value.setCurrentKey(state.current_depart.id)
                } else {
                    //多选
                    let arr = []
                    state.current_depart.forEach(it => arr.push(it.id))
                    tree.value.setCheckedKeys(arr, true)
                }
            })
        }
    }
}

//科室节点点击
let handleNodeClick = (data) => {
    if (!state.showCheck) {
        //单选
        state.current_depart = JSON.parse(JSON.stringify(data))
        state.current_depart.department_name = data.department_tree_name
    }
}

let checkChange = (data, checked) => {
    //多选
    state.checkStrictly = true
    nextTick(() => {
        tree.value.setCheckedNodes(checked.checkedNodes)
        state.current_depart = tree.value.getCheckedNodes()
        state.checkStrictly = false //赋值完成后设置为false
    })
}

//提交
let submitHandle = () => {
    if (!state.current_depart) {
        ElMessage({
            message: '请选择科室',
            type: 'warning'
        })
        return
    }
    emits('inputdeparmentdata', state.showCheck ? state.current_depart : [state.current_depart])
    dialog.value.handleClose()
}

defineExpose({ openFunction })
</script>

<style lang="scss" scoped>
.detababox1 {
    width: 100%;
    padding-bottom: 10px;
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    border: 1px solid rgba(211, 220, 230, 1);
}

.babox1 {
    font-size: 14px;
    color: rgba(132, 146, 166, 1);
    padding: 7px 10px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    border-bottom: 1px solid #e0e6ed;
}

.babox2 {
    padding: 10px 0 0 0;
}

.baboxspan {
    width: 100%;
    /*超出部分隐藏*/
    overflow: hidden;
    /*超出部分文字以...显示*/
    text-overflow: ellipsis;
    /*不换行*/
    white-space: nowrap;
    cursor: pointer;
}

.babox3 {
    border: 1px solid rgba(211, 220, 230, 1);
    margin: 0 10px;
    padding: 5px;
}

.babox3 {
    &:deep(.el-input__inner) {
        border: none;
        border-radius: 0;
        width: 100%;
    }

    &:deep(.el-input__prefix) {
        height: 8%;
    }
}

.boxfafk1 {
    width: 100%;
    height: 260px;
    overflow: auto;
}
</style>